<template>
  <div style="padding-top:9px;border-radius: 8px; ">
    <div class=" lightBox ">
      <a-card title="产量">
        <div
          class="progressdivtime progressbox"
          style="width: 100%;margin: 0 auto"
        >
          <!-- <h6 style="font-weight:normal;font-size: 14px;color: #7F8FA4;line-height: 24px;margin-bottom: 20px">{{noTitleKey==1?'产量':'报警持续时间'}} </h6> -->
          <div>
            <div
              class="progressdivtime"
              v-for="(item, index) in DefMonthProduceDayData"
              :key="index"
            >
              <span class="progressOnename colorin" v-if="item.producename">{{
                item.producename
              }}</span>
              <span class="progressOnename colorin" v-else>{{
                item.time
              }}</span>
              <!-- 天 -->
              <a-progress
                v-if="item.producename"
                strokeColor="#1991EB"
                style="width:70%"
                :percent="parseInt(item.rate)"
                :format="(percent) => formatPercent(percent, item.num)"
              />
              <a-progress
                v-else
                strokeColor="#1991EB"
                style="width:70%"
                :percent="item.rate"
                :format="(percent) => formatPercent(percent, item.total)"
              />
              <!-- 天 -->
            </div>
          </div>
          <!-- <div v-if="noTitleKey == 2">
            <div
              class="progressdivtime colorin"
              v-for="(item, index) in DefMonthAlarmTimeData"
              :key="index"
            >
              <span class="progressOnename colorin">{{ item.uploadtime }}</span>
              <a-progress
                strokeColor="#1991EB"
                style="width:70%"
                :percent="item.rate"
                :format="
                  (percent) => formatPercenttime(percent, item.alarmtime)
                "
              />
            </div>
          </div> -->
        </div>
      </a-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    DefMonthProduceDayData: {
      type: Array,
      default: () => [],
    },
    DefMonthAlarmTimeData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      formatPercent(percent, num) {
        return num + "件";
      },
      formatPercenttime(percent, time) {
        return time + "小时";
      },
    };
  },
  watch: {
    DefMonthProduceDayData(val) {
      return val;
    },
    DefMonthAlarmTimeData(val) {
      return val;
    },
  },
  methods: {
    onTabChange(key, type) {
      this[type] = key;
    },
  },
};
</script>

<style scoped lang="less">
@import "../../index";
</style>
